<template>
	<div class="container" style="display: inline;margin-right: 10px;">
		<el-tag
			v-for="(tag, index) in dynamicTags"
			:key="index"
			:closable="checkTagEdit(tag) ? false : !disabled"
			:disabled="disabled"
			:disable-transitions="false"
			:type="checkTagEdit(tag) ? 'info' : ''"
			class="show-input-tag"
			@close="handleClose(tag)"
		>
			{{ getTagText(tag) }}
		</el-tag>

		<el-input
			v-if="inputVisible"
			ref="saveTagInput"
			v-model="inputValue"
			class="input-new-tag"
			size="small"
			:disabled="disabled"
			@keyup.enter.native="handleInputConfirm"
			@blur="handleInputConfirm"
			v-input="isInteger ? { name: 'intp' } : { name: 'noEmpty' }"
		></el-input>
		<el-button
			v-if="!inputVisible && !disabled"
			class="button-new-tag"
			:disabled="disabled"
			size="small"
			type="primary"
			@click="showInput"
		>
			{{ $t('dxn.game_rule.add') }}
		</el-button>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { Decimal } from 'decimal.js'
export default {
	mixins: [list],
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		tagsName: {
			type: String,
			default: ''
		},
		isInteger: {
			type: Boolean,
			default: false
		},
		tagsDisableItem: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			dynamicTags: [],
			inputVisible: false,
			inputValue: '',
			tagsValidate: true
		}
	},
	computed: {
		newPrecision() {
			return undefined
		}
	},
	watch: {
		value: {
			handler(val) {
				if (Array.isArray(val)) {
					this.dynamicTags = val
				} else {
					if (val || Number(val) === 0) {
						this.dynamicTags = String(val)
							.split(',')
							.filter((item) => item !== '')
					} else {
						val = ''
					}
				}
			},
			immediate: true
		},
		dynamicTags(val) {
			if (Array.isArray(val)) {
				this.$emit('input', val.join(','))
			} else {
				this.$emit('input', val)
			}
		}
	},
	mounted() {
		this.sendTagsValidateResult()
	},
	methods: {
		checkTagEdit(val) {
			return this.tagsDisableItem.find((item) => val === item.code)?.desc
		},
		getTagText(val) {
			return (
				this.tagsDisableItem.find((item) => val === item.code)?.desc ||
				val
			)
		},
		handleClose(tag) {
			if (this.disabled) return
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
		},
		showInput() {
			this.inputVisible = true
			this.$nextTick((_) => {
				this.$refs.saveTagInput.$refs.input.focus()
			})
		},
		checkInputVal(val) {
			if (Number(val) === 0) {
				return false
			}
			const pattern = /^\d+$/
			const arrPoint = val.split('.') // 带小数点输入值
			const arrSlash = val.split('/') // 带斜杠输入值
			if (arrPoint.length > 2 || arrSlash.length > 2) {
				return false
			} else if (arrPoint.length === 2) {
				if (!pattern.test(arrPoint[0]) || !pattern.test(arrPoint[1])) {
					return false
				}
				// 小数点前后只能一位数字
				if (Number(arrPoint[0]) > 9 || Number(arrPoint[1]) > 9) {
					return false
				}
			} else if (arrSlash.length === 2) {
				if (!pattern.test(arrSlash[0]) || !pattern.test(arrSlash[1])) {
					return false
				}
				// 分子分母只能一位数字
				if (Number(arrSlash[0]) > 9 || Number(arrSlash[1]) > 9) {
					return false
				}
			} else if (!pattern.test(val)) {
				return false
			} else if (Number(val) > 20) {
				// 不超过2位数
				return false
			}
			return true
		},
		sendTagsValidateResult() {
			this.$emit(
				'updateTagsValidateResult',
				this.tagsName,
				this.tagsValidate
			)
		},
		handleInputConfirm() {
			this.tagsValidate = false
			this.sendTagsValidateResult()
			const inputValue = this.inputValue
			if (inputValue) {
				let arr = []
				if (Array.isArray(this.dynamicTags)) {
					arr = [...this.dynamicTags]
				} else {
					if (this.dynamicTags) {
						arr = String(this.dynamicTags)
							.split(',')
							.filter((item) => item !== '')
					} else {
						arr = []
					}
				}
				if (!this.checkInputVal(inputValue)) {
					this.$message.closeAll()
					this.$message.error('输入值不符合要求，请重新输入')
					this.inputVisible = false
					this.inputValue = ''
					return
				}
				// 重复值校验
				if (
					arr.find(
						(item) =>
							Number(item) === Number(inputValue) ||
							String(item) === String(inputValue)
					)
				) {
					this.$message.error(this.$t('dxn.game_rule.already_exists'))
					this.inputVisible = false
					this.inputValue = ''
					return
				}
				arr.push(inputValue)
				// 底池加注校验
				if (arr.length > 20) {
					this.$message.closeAll()
					this.$message.error('最多20项，请删除后再新增')

					this.inputVisible = false
					this.inputValue = ''
					return
				}
				arr.sort((a, b) => {
					const aArr = a.split('/')
					const bArr = b.split('/')
					const last =
						aArr.length === 2
							? Number(Decimal.div(aArr[0], aArr[1]))
							: Number(a)
					const next =
						bArr.length === 2
							? Number(Decimal.div(bArr[0], bArr[1]))
							: Number(b)
					return last - next
				})
				this.dynamicTags = arr.join(',')
			}
			this.tagsValidate = true
			this.inputVisible = false
			this.inputValue = ''
			this.sendTagsValidateResult()
		}
	}
}
</script>

<style lang="scss" scoped>
.show-input-tag {
	margin-right: 10px;
	width: 65px;
	font-size: 13px;
	text-align: center;
}
.button-new-tag {
	border: 1px;
	height: 30px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-right: 10px;
	vertical-align: bottom;
}
.item {
	margin-right: 20px;
	&:last-child {
		margin-right: 0;
	}
}
::v-deep .el-tag .el-icon-close {
	top: -16px;
	right: -18px;
	border: 1px solid #409eff;
}
</style>
